<template>
  <!-- <div class="title">图纸信息汇总</div> -->
  <div style="display: flex; width: 100%; height: 100%">
    <div class="wrapper1" style="margin-right: 20px">
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel key="4">
          <template #header
            ><a-space>
              图纸备注<Icon
                icon="ant-design:book-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
          <a-steps progress-dot :current="current" direction="vertical">
            <a-step
              title="2023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件,西南铝材6061/厚度14 失效订料单件"
            />
            <a-step
              title="2023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            />
            <a-step
              title="32023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            />
            <!-- <a-step
              title="42023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            /> -->
            <!-- <a-step
              title="2023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            /> -->
          </a-steps>
        </a-collapse-panel>

        <a-collapse-panel key="2">
          <template #header
            ><a-space>
              完工备注<Icon
                icon="ant-design:check-circle-filled"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
          <a-steps progress-dot :current="current" direction="vertical">
            <a-step
              title="2023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件,西南铝材6061/厚度14 失效订料单件"
            />
            <a-step
              title="2023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            />
            <a-step
              title="32023-05-06 11:24    工序：FH"
              description="西南铝材6061/厚度14 失效订料单件"
            />
          </a-steps>
        </a-collapse-panel>

        <a-collapse-panel key="3">
          <template #header
            ><a-space>
              补领料备注<Icon
                icon="ant-design:download-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="4">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              检验备注<Icon
                icon="simple-line-icons:wrench"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="5">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              委外备注<Icon
                icon="ant-design:comment-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="6">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              退货备注<Icon
                icon="ant-design:close-circle-filled"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="wrapper1">
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel key="7">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              加工过程备注<Icon
                icon="ant-design:cluster-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="8">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              机床完工备注<Icon
                icon="ant-design:inbox-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="9">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              调试备注<Icon
                icon="simple-line-icons:settings"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="10">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              首检备注<Icon
                icon="ant-design:field-binary-outlined"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="11">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              过程检备注<Icon
                icon="ant-design:fund-filled"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
        <a-collapse-panel key="12">
          <p>{{ text }}</p>
          <template #header
            ><a-space>
              编程反馈检备注<Icon
                icon="ant-design:control-filled"
                color="#0000FF"
                fontSize="20px" /></a-space
          ></template>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { ref, watch } from 'vue';
  const current = ref<number>(5);

  const text = ref(`无备注无备注无备注`);
  const activeKey = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);

  watch(activeKey, (val) => {
    console.log(val);
  });
</script>
<style>
  /* .title {
    font-size: large;
  } */

  .wrapper1 {
    flex: 1;
  }
  .ant-collapse-header {
    font-weight: bolder;
  }
  .ant-collapse-item {
    margin-top: 10px;
  }
  .ant-space-item {
    font-size: large;
  }
</style>
